
<style>
  .layui-form-label {
    width: 150px;
  }

  form {
    margin: 20px;
  }

  .not-update-input{
    cursor:not-allowed;
    border: none;
  }
</style>

<script type="text/html" id="tpl-objectSetting">
  <form class="layui-form " action="" onsubmit="return false" lay-filter='obj-setting-form'>
    <fieldset class="layui-elem-field  layui-field-title">
      <legend>基础信息</legend>
      <div class="layui-field-box">
        <div class="layui-form-item">
          <label class="layui-form-label">项目名称</label>
          <div class="layui-input-inline">
            <input type="text" name="project_name" required lay-verify="required" placeholder="请输入名称" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">项目备注</label>
          <div class="layui-input-inline">
            <input type="text" name="project_note" required lay-verify="required" placeholder="请输入备注信息" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">访问密码</label>
          <div class="layui-input-inline">
            <input type="text" name="project_password" required lay-verify="required" placeholder="无密码" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">项目创建时间</label>
          <div class="layui-input-inline">
            <input type="text" name="project_create_time" class="not-update-input layui-input" title="此项不可修改" readonly autocomplete="off">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">首个事件时间</label>
          <div class="layui-input-inline">
            <input type="text" name="project_first_event_time" class="not-update-input layui-input" title="此项不可修改，首个事件的开始时间" readonly autocomplete="off">
          </div>
        </div>
      </div>
    </fieldset>

    <fieldset class="layui-elem-field  layui-field-title">
      <legend>风格设置</legend>
      <div class="layui-field-box">
        <div class="layui-form-item">
          <label class="layui-form-label">每周的第一天为</label>
          <div class="layui-input-inline">
            <select name="firstDay" lay-verify="required" lay-search>
              <option value="0" checked>周日</option>
              <option value="1">周一</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">月视图最大显示数量</label>
          <div class="layui-input-inline">
            <input type="number" name="eventLimit"  placeholder="不填为自动" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">是否显示周次</label>
          <div class="layui-input-inline">
            <input type="radio" name="weekNumbers" value="1" title="是" >
            <input type="radio" name="weekNumbers" value="0" title="否" checked>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">日程时间</label>
          <div class="layui-input-inline">
            <input type="radio" name="c_dayTimeDisplay" value="2" title="显示开始和结束时间" >
            <input type="radio" name="c_dayTimeDisplay" value="1" title="只显示开始时间">
            <input type="radio" name="c_dayTimeDisplay" value="0" title="隐藏时间" checked>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">节假日背景色</label>
          <div style="margin-left: 30px;">
            <div class="layui-input-inline" style="width: 120px;">
              <input type="text" name="holidayBackground" value="" readonly="" id="color_input" placeholder="留空无背景色"
                class="layui-input">
            </div>
            <div class="layui-inline" style="left: -11px;">
              <div id="test-form"></div>
            </div>
          </div>
        </div>
        
        <!-- 删除只读模式 -->
        <!-- <div class="layui-form-item">
          <label class="layui-form-label">只读模式</label>
          <div class="layui-input-inline">
            <input type="radio" name="c_onlyRead" value="1" title="是" >
            <input type="radio" name="c_onlyRead" value="0" title="否" checked>
          </div>
        </div> -->

      </div>
    </fieldset>
    <!-- <fieldset class="layui-elem-field  layui-field-title">
      <legend>事件主题</legend>
      <div>
        <button class="layui-btn">点此设置</button>
      </div>
    </fieldset> -->
    <!-- <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="save_setting">保存</button>
        <button class="layui-btn layui-btn-danger"  lay-submit lay-filter="delete_obj">删除此项目</button>
      </div>
    </div> -->
  </form>
</script>


<script>
    app.base.loadApi('apiObject');
    app.defTpl('objectSetting', function (tplArg) {
      layui.use(['layer','laydate','form','colorpicker','jquery','apiObject','app'],function(){
          var layer=layui.layer,laydate=layui.laydate,colorpicker=layui.colorpicker,form=layui.form;
          $=layui.jquery;
          var objId=tplArg.objId;
          
          // 直接弹窗
          app.base.layer({
            title:"项目管理",
            type: 1,
            skin:"tpl-objectSetting",
            area: ['440px', '500px'], //宽高
            content: $('#tpl-objectSetting').html(),
            buttons:[
              {
                title:"保存",
                onClick:function(index){
                  // 保存设置
                  // console.log(form.val("obj-setting-form"));
                  postdata = form.val("obj-setting-form");
                  layui.apiObject.update(tplArg.objId, postdata, function (data) {
                    layer.msg('修改成功')
                    location.reload(true)
                  })
                  return false;
                  
                }
              },
              {
                title: "删除本项目",
                type:'danger',
                onClick: function (index) {
                  // 删除项目
                  // form.on('submit(delete_obj)', function (data) {
                    layer.confirm('亲，你真的确定删除项目吗', {
                      btn: ['确定', '取消'] //按钮
                    }, function () {
                      layer.prompt({
                        formType: 0,
                        // value: '初始值',
                        title: '请输入此项目的名字'
                      }, function (value, index, elem) {
                        // alert(value); //得到value
                        layer.confirm('再次跟你确认一下是否要删除此项目', {
                          btn: ['确定', '取消'] //按钮
                        }, function () {
                          layui.apiObject.delete(objId, value, function () {
                            // 删除成功返回首页
                            app.go(app.base.route.home)
                            layer.closeAll();
                          }, function (msg) {
                            layer.alert('删除失败，请确认名字是否正确或' + msg)
                          })
                        });
                      });
                    });
                  // })
                  return false;
                }
              }
            ],
            success:function(){
              form.render()
            }
          })

          layui.apiObject.getConfig(objId,function(resData){
            form.val("obj-setting-form", resData);
            colorpicker.render({
              elem: '#test-form'
              , color: (resData.holidayBackground ? resData.holidayBackground : "")
              , done: function (color) {
                $('#color_input').val(color);
              }
            });
          })
      });

    })
</script>
